import React from 'react';
import { Chart, Tooltip, Legend, Point, Line, Interval, Axis } from 'bizcharts';
import RightTableModal from '../RightTableModal';

const data = [
  {
    xdata: '锅炉1',
    ydata: 16,
    lineData: 11.2,
  },
  {
    xdata: '锅炉2',
    ydata: 15,
    lineData: 10.5,
  },
  {
    xdata: '锅炉3',
    ydata: 15,
    lineData: 10.5,
  },
  {
    xdata: '锅炉4',
    ydata: 14,
    lineData: 9.8,
  },
  {
    xdata: '锅炉5',
    ydata: 14,
    lineData: 9.8,
  },
  {
    xdata: '锅炉6',
    ydata: 14,
    lineData: 9.1,
  },
  {
    xdata: '锅炉7',
    ydata: 13,
    lineData: 9.1,
  },
  {
    xdata: '锅炉8',
    ydata: 13,
    lineData: 8.4,
  },
  {
    xdata: '锅炉9',
    ydata: 12,
    lineData: 8.4,
  },
  {
    xdata: '锅炉10',
    ydata: 12,
    lineData: 8.4,
  },
  {
    xdata: '锅炉11',
    ydata: 12,
    lineData: 8.4,
  },
  {
    xdata: '锅炉12',
    ydata: 10,
    lineData: 7.7,
  },
  {
    xdata: '锅炉13',
    ydata: 10,
    lineData: 7,
  },
  {
    xdata: '锅炉14',
    ydata: 10,
    lineData: 7,
  },
  {
    xdata: '锅炉15',
    ydata: 9,
    lineData: 6.3,
  },
  {
    xdata: '锅炉16',
    ydata: 9,
    lineData: 6.3,
  },
  {
    xdata: '锅炉17',
    ydata: 8,
    lineData: 5.6,
  },
  {
    xdata: '锅炉18',
    ydata: 8,
    lineData: 5.6,
  },
  {
    xdata: '锅炉19',
    ydata: 8,
    lineData: 5.6,
  },
  {
    xdata: '锅炉20',
    ydata: 7,
    lineData: 4.9,
  },
  {
    xdata: '锅炉21',
    ydata: 7,
    lineData: 4.9,
  },
];

const scale = {
  lineData: {
    min: 0,
    alias: '异常数据源占比(%)',
    type: 'linear-strict',
  },
  ydata: {
    min: 0,
    alias: '数据源(个数)',
    type: 'linear-strict',
  },
};

const colors = ['#6394f9', '#62daaa'];

let chartIns = null;

class RightChart extends React.Component {
  state = { modalVisible: false };

  handleCancel = () => {
    this.setState({ modalVisible: false });
  };

  render() {
    const { modalVisible } = this.state;

    return (
      <>
        <Chart
          scale={scale}
          autoFit
          height={this.props.height - 55}
          padding={[40, 80, 50]}
          data={data}
          onGetG2Instance={chart => {
            chartIns = chart;
          }}
          onPlotClick={e => this.setState({ modalVisible: true })}
        >
          <Tooltip shared />
          <Axis
            name="ydata"
            position="left"
            title={{
              style: {
                fontSize: 14,
                textAlign: 'center',
              },
            }}
            label={{
              formatter(text) {
                return `${text}个`;
              },
            }}
          />
          <Interval
            position="xdata*ydata"
            color={colors[0]}
            tooltip={[
              'xdata*ydata',
              (x, y) => {
                return {
                  name: '数据异常数据源数量',
                  value: y,
                };
              },
            ]}
          />
          <Axis
            name="lineData"
            position="right"
            // title={{
            //   style: {
            //     fontSize: 14,
            //     textAlign: 'center',
            //   },
            // }}
            label={{
              formatter(text) {
                return `${text}%`;
              },
            }}
          />
          <Line
            position="xdata*lineData"
            color={colors[1]}
            size={3}
            // label={[
            //   'lineData',
            //   value => ({
            //     content: value + '%',
            //   }),
            // ]}
            tooltip={[
              'xdata*lineData',
              (x, y) => ({
                name: '数据异常数据源占比',
                value: `${y}%`,
              }),
            ]}
          />
          <Point
            position="xdata*lineData"
            color={colors[1]}
            size={3}
            shape="circle"
            tooltip={false}
          />
          <Legend
            custom={true}
            allowAllCanceled={true}
            position="top-left"
            offsetX="24"
            items={[
              {
                value: 'ydata',
                name: '数据异常数据源数量',
                marker: {
                  symbol: 'square',
                  style: { fill: colors[0], r: 5 },
                },
              },
              {
                value: 'lineData',
                name: '数据异常数据源占比',
                marker: {
                  symbol: 'hyphen',
                  style: { stroke: colors[1], r: 5, lineWidth: 3 },
                },
              },
            ]}
            onChange={ev => {
              const item = ev.item;
              const value = item.value;
              const checked = !item.unchecked;
              const geoms = chartIns.geometries;

              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];

                if (geom.getYScale().field === value) {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                }
              }
            }}
          />
        </Chart>

        <RightTableModal
          visible={modalVisible}
          handleCancel={this.handleCancel}
        />
      </>
    );
  }
}

export default RightChart;
